<template>
		<div id="menu">
			
			<span class="span1">精选</span>
			
			<div class="jingxuan" v-on:click.stop="show">
				<span>男生</span>
			</div>
			
			<div class="options">
				<div @click="events('0')">男生</div>
				<div @click="events('1')">女生</div>
			</div>
			
			<div class="search" @click="change"><img src="../../assets/img/search.jpg" alt="搜索" /></div>
			<div class="paixun"><img src="../../assets/img/paixu.jpg" alt="排序" /></div>
		</div>
				
</template>

<script>
		export default {
  		
  		methods: {
  			show(event){
				let jingxuan = document.querySelector('.jingxuan');
				let options = document.querySelector('.options');
				
				if(options.style.display == 'none'){
					options.style.display = "block";
				}else{
					options.style.display = "none";
				}
  			},
  			events(type){
  				this.$emit('accept',type);
  				let options = document.querySelector('.options');
  				options.style.display = "none";
  			},
  			change(){
  				this.$store.commit('changeState');
  			}
  			
  		},
  		mounted(){
  			this.$emit('accept','0');
  		}
  	}
   	
	
</script>

<style>
	#menu{
		position:relative;
		width:100%;
		height:1.051724rem;
		background:#d23e3b;
		border:none;
	}
	#menu .jingxuan{
		position:absolute;
		left: 1.034482rem;
		top: 0.465517rem;
		width: 1.206896rem;
		height: 0.465517rem;
		color:white;
		background-color:#b83634;
		/*font-size:large;*/
		border-radius: 0.344827rem;
		text-align:center;
		/*FILTER: alpha(opacity=0);*/
		/*border-color:white;*/
		/*appearance:none;*/
		/*border-style: none;*/
		/*appearance: none;*/
	}
	#menu .jingxuan span{
		/*line-height:0.465517rem;*/
		font-size:0.310344rem;
		vertical-align:middle;
	}
	#menu  .options{
		position:absolute;
		left: 1.137931rem;
		/*top: 0.413793rem;*/
		top: 1rem;
		width:1.637931rem;
		height:1.637931rem;
		background: white;
		display:none;
		z-index: 100;
	}
	#menu .options div{
		height:50%;
	}
	
	#menu .span1{
		position:absolute;
		left:0.310344rem;
		top:0.5rem;
		color:white;
		font-size:0.310344rem;
	}
	#menu .search{
		position: absolute;
		left: 8.327586rem;
		top: 0.344827rem;
		width:0.37931rem;
		height:0.37931rem;
	}
	#menu .paixun{
		position: absolute;
		left: 9.310344rem;
		top:0.344827rem;
		width:0.37931rem;
		height:0.37931rem;
	}
</style>